<template>
    <Layout title="我的" showHome> 
        <div class="my-box">
            <div class="font-box">
                <div class="font-item">
                    <i class="img">
                        <img src="../../images/font.jpg">
                    </i>
                    <span class="name"><span>「{{name}}」</span>你好!</span>
                </div>
            </div>
            <div class="content">
                <div class="item">
                    <span class="title" @click="copyMsg">版本信息</span>
                </div>
                <div class="item">
                    <span class="title" @click="aboutAs">关于我们</span>
                </div>
                <div class="item">
                    <span class="title" @click="goHome">退出登录</span>
                </div>
            </div>
        </div>  
    </Layout>
</template>
<script setup>
    import { ref,reactive,onMounted } from "vue";
    import { showToast } from 'vant';
    import { useRouter } from "vue-router";
    import { showConfirmDialog } from 'vant';
    import {commonDefinition  } from "../../store/index";
    const router = useRouter()
    const name = ref('')

    onMounted(function(){
        name.value = commonDefinition().getUserInfo.name
    })

    function copyMsg() {
        showToast('当前已为最新版本 ~')
    }
    function aboutAs() {
        showToast('我们是穿梭银河的超级  [  对对对  ]  队！ ')
    }
    function goHome() {
        showConfirmDialog({
            title: '退出登录',
            message:
                '确定要退出该账号吗？',
            })
            .then(() => {
                localStorage.removeItem('auto-login')
                sessionStorage.removeItem('login-token')
                sessionStorage.removeItem('xingqiu-token')
                router.push('/login')
            })
            .catch(() => {
            });
    }
</script>
<style lang="less" scoped>
    @import '../../style/common.less';
    .my-box{
        position: relative;
        display: block;
        height: 100%;
        width: 100%;
        padding: 5px 10px 0 10px;
        >.font-box{
            display: block;
            position: relative;
            background: @b01;
            width: 100%;
            height: 180px;
            border-radius: 5px;
            margin-bottom: 10px;
            // margin: auto;
            >.font-item{
                display: block;
                position: relative;
                width: 300px;
                height: 200px;
                margin: auto;
                text-align: center;
                padding-top:30px ;
                >.img{
                    display: block;
                    position: relative;
                    width: 103px;
                    height: 103px;
                    border: 4px solid @b03;
                    border-radius: 50px;
                    // background-color: white;
                    margin: auto;
                    margin-bottom: 10px;
                    >img{
                        height: 100%;
                        width: 100%;
                        border-radius:50px;
                    }
                }
                >.name{
                    display: block;
                    position: relative;
                    font-size: 0.8rem;
                    color: @b05;
                    >span{
                        font-size: 0.9rem;
                        font-weight: bold;
                    }
                }
            }
        }
        >.content{
            display: block;
            position: relative;
            width: 100%;
            background: white;
            border-radius: 5px;
            >.item{
            position: relative;
            display: block;
            width: 100%;
            // margin-bottom: 10px;
            overflow: hidden;
            border-bottom: 2px solid @g02;
            >.title{
                display: block;
                padding: 0 0 9px 15px;
                margin-left: 10px;
                margin-top: 10px;
                border-left: 3px solid @b03;
                color: @g07;
                height: 40px;
                line-height: 40px;
                margin-bottom: 10px;
                font-size: 0.85rem;
                
            }
        }
    }
}
</style>